"use client";

import { useLanguage } from "@/context/language-provider";
import { Globe } from "lucide-react";
import { cn } from "@/lib/utils";
import { useRouter } from "next/navigation";

interface LanguageSwitcherProps {
  className?: string;
}

export default function LanguageSwitcher({ className }: LanguageSwitcherProps) {
  const { language, setLanguage } = useLanguage();
  const router = useRouter();
  
  const toggleLanguage = () => {
    setLanguage(language === "zh" ? "en" : "zh");
    router.push(language === "zh" ? "/?int=true" : "/");
  };
  
  return (
    <button 
      onClick={toggleLanguage}
      className={cn(
        "flex items-center gap-1.5 px-3 py-1.5 rounded-lg transition-colors", 
        "text-foreground/60 hover:text-foreground/100",
        "border border-border/40 hover:border-border/70",
        "bg-secondary/20 hover:bg-secondary/40",
        className
      )}
      title={language === "zh" ? "切换到英文" : "Switch to Chinese"}
    >
      <Globe className="h-4 w-4" />
      <span>{language === "zh" ? "EN" : "中"}</span>
    </button>
  );
} 